<template>
	<view>
		<view v-if="newDetailInfo!==null" style="width: 94%;margin-left: 3%;">
			<!-- 顶部 -->
			<view style="display: flex;justify-content: space-between;margin-top: 10rpx;">
				<view style="display: flex;">
					<view><img style="width: 100rpx;" :src="newDetailInfo.newOrganizationAvatar" alt=""></view>
					<view style="margin-left: 10rpx;">
						<view style="margin-bottom: 12rpx;font-size: smaller;">{{newDetailInfo.newOrganizationName}}
						</view>
						<view style="font-size: small;color: #808080;">{{newDetailInfo.createAt}}</view>
					</view>
				</view>
				<view class="fontStyle" style="display: flex;align-items: center;">
					{{newDetailInfo.newViews}} 浏览量
				</view>
			</view>
			<view style="text-align: center;margin-top: 20rpx;margin-bottom: 20rpx;">
				<h3>{{newDetailInfo.newTitle}}</h3>
			</view>
			<view v-if="newDetailInfo.newAvatar!==null"><img style="width: 100%;" :src="newDetailInfo.newAvatar" alt="">
			</view>
			<view style="margin-top: 20rpx;color: #808080;width: 100%;"><span>{{newDetailInfo.newContent}}</span></view>
			<!-- 评论区 -->
			<uni-notice-bar style="margin-top: 20rpx;font-weight: bolder;" color="white" backgroundColor="#C0C0C0"
				single="true" text="评论区(点击发表评论)" @click="addCom(newDetailInfo.newId,-1)">
			</uni-notice-bar>
			<view
				style="display: flex;justify-content: space-between;border-bottom: 1px solid #C0C0C0s;padding-bottom: 20rpx;"
				v-for="(com,index) in newDetailInfo.comInfoResponse" :key="index">
				<view><img style="width: 60rpx;" :src="com.comUserAvatar" alt=""></view>
				<view style="width: 90%;display: flex;justify-content: space-between;">
					<view>
						<view style="font-size: smaller;">{{com.comUserName}}<span v-if="com.comTargetName!==null"
								style="color: #808080;margin-left: 10rpx;">回复:
								@{{com.comTargetName}}</span></view>
						<view style="font-size: small;color: #808080;margin-top: 10rpx;margin-bottom: 10rpx;">
							{{com.createAt}}
						</view>
						<view>{{com.comContent}}</view>
					</view>
					<view style="width: 20%;text-align: right;">
						<view style="margin-bottom: 20rpx;">{{com.comGood}}
							<uni-icons v-if="!goodsMap.get(com.comId) || goodsMap.get(com.comId)==undefined"
								type="hand-thumbsup-filled" size="20" @click="setGood(com.comId)"></uni-icons>
							<uni-icons v-else type="hand-thumbsup-filled" size="20" color="red"
								@click="setGood(com.comId)"></uni-icons>
						</view>
						<view style="color: #808080;" @click="addCom(newDetailInfo.newId,com.comUserId)">
							回复
							<uni-icons type="redo-filled" size="10" style="color: #808080;"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="addCom" type="dialog">
			<uni-popup-dialog title="评论内容" mode="input" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newId: null,
				newDetailInfo: null,
				goodsMap: new Map(),
				comNewId: null,
				comTargetId: null
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.newId = option.newId;
			// 获取新闻详情
			this.getNewDetail();
		},
		onShow() {
			// 获取新闻详情
			this.getNewDetail();
		},
		// 右上角更多
		onNavigationBarButtonTap: function(e) {
			var that = this;
			uni.showActionSheet({
				itemList: ['编辑新闻', '删除新闻'],
				success: function(res) {
					if (res.tapIndex == 0) {
						// 跳转到编辑新闻界面
						uni.navigateTo({
							url: './editNews?newId=' + that.newId
						})
					} else if (res.tapIndex == 1) {
						// 删除新闻，并跳转回去
						uni.showModal({
							title: '提示',
							confirmColor: 'red',
							content: '确定删除新闻吗?',
							success: res => {
								if (res.confirm) {
									that.removeNews();
								}
							}
						});
					}
				}
			});
		},
		methods: {
			// 获取新闻详情
			getNewDetail() {
				this.$http.request({
					url: `/organizations/web/news/detail/${this.newId}`
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.newDetailInfo = res.data;
					} else {
						uni.showToast({
							title: '获取新闻详情失败',
							icon: 'none'
						});
					}
				})
			},
			// 删除新闻
			removeNews() {
				this.$http.request({
					url: `/organizations/web/news/new/${this.newId}`,
					method: 'DELETE'
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								uni.navigateBack()
							}
						});
					} else {
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
			// 发表评论
			addCom(newId, targetId) {
				this.comNewId = newId
				this.comTargetId = targetId
				this.$refs.addCom.open();
			},
			// 出发发表评论
			confirm(done, value) {
				// 发送评论
				this.$http.request({
					url: `/organizations/web/news/comment`,
					data: {
						content: value,
						newId: this.comNewId,
						targetUserId: this.comTargetId
					},
					method: 'POST'
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showToast({
							title: res.data
						});
						// 关闭dialog
						this.$refs.addCom.close()
						// 刷新数据
						this.getNewDetail()
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						});
					}
				})
			},
			// 判断是否点赞
			setGood(id) {
				if (this.goodsMap.get(id) == undefined) {
					this.goodsMap.set(id, true)
					// 点赞
					this.changeGood(id, true)
				} else {
					if (this.goodsMap.get(id)) {
						this.goodsMap.set(id, false);
						// 取消点赞
						this.changeGood(id, false)
					} else {
						this.goodsMap.set(id, true)
						// 点赞
						this.changeGood(id, true)
					}
				}
			},
			// 点赞/取消点赞
			changeGood(id, status) {
				this.$http.request({
					url: `/organizations/web/news/comment/${id}/${status}`,
					method: 'PUT'
				}).then(res => {
					res = res.data;
					if (res) {
						this.getNewDetail();
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style>
	.fontStyle {
		font-size: smaller;
		color: #808080;
	}
</style>
